<template>
  <keep-alive>
    <div class="home-content">
      <!-- 导航栏 -->

      <van-nav-bar class="page-nav-btn" fixed>
        <van-button
          text="搜索"
          class="vbutton"
          slot="title"
          round
          type="primary"
          size="small"
          icon="search"
          to="/search"
        >搜索按钮</van-button>
      </van-nav-bar>
      <!-- 上方滑动列表 -->
      <!-- 通过 v-model 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。 -->
      <!-- swipeable  是否开启手势滑动切换 -->
      <!-- animated是否开启切换标签内容时的转场动画 -->
      <!-- swipe-threshold滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 -->

      <van-tabs class="channel-tabs" v-model="active" animated swipeable swipe-threshold>
        <van-tab v-for="channel in channels" :key="channel.id" :title="channel.name">
          <!-- 文章列表 -->
          <articlelist :channel="channel"></articlelist>
          <!-- 文章列表 -->
        </van-tab>

        <div slot="nav-right" class="placeholder"></div>
        <div slot="nav-right" class="gengduo" @click="showPopup">
          <i class="iconfont icon-gengduo"></i>
        </div>
      </van-tabs>
      <!-- 频道编辑弹出层 -->
      <van-popup
        v-model="isshowpopup"
        close-icon-position="top-left"
        closeable
        position="bottom"
        :style="{ height: '100%' }"
      >
        <channeledit @update-active="onUpdateActive" :active="active" :my-channels="channels" />
      </van-popup>
      <!-- /频道编辑弹出层 -->
    </div>
  </keep-alive>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getUserChannelsAPI } from '@/api/user'
import Articlelist from './components/Articlelist'
import Channeledit from './components/channel-edit.vue'
import { getItem } from '@/utils/stroage'
import { mapState } from 'vuex'
export default {
  name: 'HomeIndex',
  // import引入的组件需要注入到对象中才能使用
  components: { Articlelist, Channeledit },
  props: {},
  data () {
    // 这里存放数据
    return {
      isshowpopup: false, // 控制弹出窗口
      active: 0,
      channels: []
    }
  },
  // 计算属性 类似于data概念
  computed: { ...mapState(['user']) },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    showPopup () {
      this.isshowpopup = true
    },
    // 获取频道列表
    async getUserChannels () {
      try {
        if (this.user) {
          // 已登录，从账号获取账号

          const { data } = await getUserChannelsAPI()
          this.channels = data.data.channels
        } else {
          // 未登录，从本地获取
          const localchannel = getItem('TOKEN_MYCHANNELS')
          if (localchannel) {
            this.channels = localchannel
          } else {
            // 使用默认频道列表
            const { data } = await getUserChannelsAPI()
            this.channels = data.data.channels
          }
        }
      } catch (error) {
        this.$toast('获取频道失败')
      }
    },
    // 根据编辑进行通信
    // es6语法，不传默认值
    onUpdateActive (index, isshowpopuo = true) {
      console.log(index, 'home')
      this.active = index
      this.isshowpopup = isshowpopuo
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getUserChannels()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang='less'>
.home-content {
  padding-bottom: 100px;
  // /deep/深度选择器
  /deep/.van-nav-bar__title {
    max-width: unset;
  }
  .vbutton {
    width: 550px;
    height: 64px;
    background-color: rgb(88, 222, 255);
    border: none;
    font-size: 28px;
    .van-icon-search {
      color: white;
      font-size: 36px;
    }
  }
  /deep/.channel-tabs {
    padding-top: 87 * 2px;
    .van-tabs__line {
      background-color: rgb(136, 251, 255);
      width: 60px;
    }
    .van-tabs__wrap {
      position: fixed;
      z-index: 1;
      top: 46 * 2px;
      left: 0;
      right: 0;
    }
    .van-tab {
      border-right: 1px solid rgb(241, 241, 241);
      min-width: 200px;
      height: 82px;
      color: #777777;
    }
    .van-tab--active {
      color: rgb(0, 160, 189);
    }
    .gengduo {
      position: fixed;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 66px;
      height: 82px;

      background-color: #fff;
      opacity: 0.902;
    }
    .icon-gengduo {
      font-size: 33px;
    }
    .placeholder {
      width: 66px;
      height: 82px;
      flex-shrink: 0;
    }
  }
}
</style>
